SWISH Lite fleurt 
Je eigen flashy animaties 


Hoe kan je je homepage beter opfleuren dan met een blitse animatie? Professionele web- 
bouwers maken daarvoor gebruik van Macromedia Flash. SWISH Lite bewijst dat het ook 


je website op 


goedkoper én makkelijker kan. #_roon van oare 


en animatie voor je webstek hoort vooral 

lichtvoetig te zijn: niemand zit namelijk 
te wachten op een loodzware download om 
daarna met een simpel effectje ‘beloond’ te 
worden! Softwarebedrijf Macromedia is er ech- 
ter perfect in geslaagd om zelfs complexe ani- 
maties in erg compacte bestanden te gieten. 
Het geheim? Het Flash-formaat! Dit eigenzin- 
nige formaat heeft wel het nadeel dat je een 
speciale plugin moet downloaden om de anima- 
ties te kunnen bewonderen. Maar deze gratis 
Flash-speler prijkt inmiddels al op 98% van alle 
pc's. De kans is dus klein dat de bezoeker van 
je webstek niet kan meegenieten van je Flash- 
animaties. Het moederprogramma voor het cre- 
eren van zulke animaties is natuurlijk Macrome- 
dia Flash (intussen al aan z’n achtste versie toe). 
De leercurve voor deze applicatie is echter be- 


Op verkenning 


Zodra je SWiSH opstart, beland je in het hoofdvenster. Dat laat zich 
in een knip ontrafelen. Helemaal bovenaan vind je de menubalk, en 
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hoorlijk steil, en bovendien kost de tool je een 
flinke duit. Op onze Clickx-cd vind je echter een 
handig alternatief: SWiSH Lite, dat je na regi- 
stratie onbeperkt kan gebruiken (zie pagina 17)! 
Deze Lite-versie mist weliswaar de geavanceer- 
de gadgets van Macromedia Flash, maar als je 
meer ‘power’ wil, dan kan je op www.swishzone. 
com nog altijd overschakelen naar grote broer 
SWiSH Max. Die kan je gratis aan de tand voelen 
gedurende 15 dagen, waarna je € 84,85 betaalt 
— nog altijd stukken goedkoper dan Macromedia 
Flash. Je vindt de proefversie van deze tool ook 
op de cd-rom die bij dit nummer zit. Voor deze 
beginnerscursus houden we het bescheidener en 
concentreren we ons op SWiSH Lite. Maar je zal 
zien: zelfs met deze uitgeklede versie schud je 
best al aardige Flash-animaties uit de mouw! We 
steken meteen van wal. 


Customer Success Stories 


Can't see this content? 


To view this content, JavaSenpt must be 
enabled. and you need the latest version 
of the Macromedia Flash Player. 


Download the free Flash Player now! 
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More info 


Enkel een verloren ziel heeft nog geen Flash- 
speler geïnstalleerd. 


net daaronder verschijnt de toolbalk met aparte knopjes voor de 
meest gebruikte functies. Rechts zie je een venster dat toebehoort 
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tabbalk 


aan een van de tabs die je op de tabbalk geacti- 
veerd hebt. Welke tabs dat precies zijn, hangt af 
van het object dat je links in de scènelijst geselec- 
teerd hebt — dat wordt nog wel duidelijk verder in 
deze cursus. Je hebt intussen ook al gemerkt dat 
er zich op de achtergrond een tweede venster ge- 
nesteld heeft: het weergavevenster. Dit venster is 
vooral belangrijk om snel het (tussentijdse) resul- 
taat van je creatie te controleren. Hiermee is de 
eerste verkenningsronde van SWiSH Lite achter de 
rug en kan je zelf aan de slag. 


SWiSH Lite beschikt over een erg 
overzichtelijke interface. 


Je bent stikjaloers op al die websites die vol staan met allerlei animaties. Zelf zo'n animatie maken hoeft niet zo 
moeilijk te zijn als je wel denkt: met SWISH Lite is dat in een knip gebeurd — en het kost je niets. 


Filmdoek 


We beginnen vanaf nul, en dat doen we door in het Fie-menu de 
optie New aan te stippen. Je merkt dat je animatiefilmpje in de 
scênelijst de nietszeggende naam Untirteop meekrijgt, en dat dit 
voorlopig slechts uit één scène bestaat, Scene 1 genaamd. Goede 
gewoontes kweek je best bij het begin aan, en daarom krijg je er al 
dadelijk eentje cadeau: open opnieuw het Fite-menu en kies Save, 
zodat je animatie veilig bewaard wordt — iets wat je bij voorkeur 
heel frequent doet. Geef een geschikte naam aan je nieuwbakken 
SWiSH-filmpje. Die krijgt automatisch de extensie .swi mee. Dat is 
weliswaar een eigen formaat, maar maak je geen zorgen: op het 
einde van deze cursus zien we wel hoe je het filmpje in een zuiver 
Flash-formaat (met extensie .swf) giet. Je merkt ook hoe UntirLeo 
inmiddels vervangen is door de naam die je aan het swi-bestand 
gegeven hebt. Laten we nu eerst de algemene kenmerken van ons 
filmpje instellen. Daarvoor open je het tabblad Generar. Hierin kan 
je zowel de breedte als de hoogte van je animatie vastleggen. Bij 
FRAMES PER SEconD (rs) bepaal je hoe lang elk frame van de animatie 
zichtbaar is. Een hoge fps-waarde zorgt voor een snel, vloeiend 
filmpje, maar hou er wel rekening mee dat de pc van je bezoeker 


Object invoegen 


Tijd om aan onze eerste scêne te werken, want zonder een object 
(tekst, tekening, geluid, …) valt er natuurlijk niks te beleven. Voor we 
echter een object op de scène plaatsen, is het een goed idee een paar 
globale eigenschappen van die scène vast te leggen. Daarvoor dub- 
belklik je in de scênelijst op de naam Scene 1. Het tabblad Scene wordt 
nu automatisch geopend. Bij Scene Name tik je een gepaste naam in voor 
je scêne en in het veld Scene Link kan je de url van een webpagina 
opgeven die de bezoeker te zien krijgt zodra hij je animatie in z'n 
browser aanklikt — uiteraard kan je dit veld ook leeg laten. Kies je bij 
TARGET FRAME VOOr _ BLANK, dan zal z’n browser een geheel nieuw venster 
openen. Laten we onze eerste scène nu opfleuren met een klein 
stukje tekst. Daarvoor doen we een beroep op de knop Insert Text in 
de toolbalk. Zorg wel dat je nog altijd de bewuste scène in de scènelijst 
geselecteerd hebt. Open vervolgens het tabblad Text. Dat heeft de 
aanblik van een uitgeklede tekstverwerker: ook hier kan je lettertype, 
-grootte en -kleur instellen, vetjes en cursief kiezen, en een uitlijning 
selecteren. Tik in dit venster de gewenste tekst in. Standaard wordt 


& IX) 
Ojee sjelelx| iel elrlmlt|t| „| 
FE Voorzichtig begin. sw 

E Welkom! 


EMW elkom bezoeker LE 


| sla 


General | Content] Timeline Test | Actions) Export 


[tan benee 


Editing - Yoorzichtig begin.swi 


Align: [Center 


vjatX/300  Y:|50 [__Show PS Fonts 


Keming [4 Ax Leadngl0 Ax 1 Ewportas Shapes 


Een ingebouwde minitekstverwerker. 


BES 


5 aa) 
| 
Osje) selelx| 2e) elrlmlt|+| „Il 


[ Voorzichtig begin.sw… 
lm) 


macromedia 
75 ELASN 
ENABLED 


rale 


General | Content | Timeline | Scene | Actions | Export 


eo 
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Click hete to see SWISH version 2.0 
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Het weergavevenster reflecteert meteen de filmeigenschappen. 


die snelheid moet aankunnen. Een veilige waarde met een aanvaard- 
bare kwaliteit is 12 fps. Verder kan je hier ook de achtergrondkleur 
van het filmdoek instellen. Ten slotte zorg je er met een vinkje bij 
Loop PREVIEW ANIMATION voor dat je animatie bij het afspelen in het 
weergavevenster steeds opnieuw herhaald wordt. 


de tekst in je filmpje gecentreerd, maar vanuit het weergavevenster 
kan je de tekst ook naar een nieuwe locatie slepen. Dat werkt natuur- 
lijk nog nauwkeuriger vanuit het Texr-venster zelf: onderaan stel je 
namelijk in welke uitlijning je op welke pixelpositie wenst (bijvoorbeeld: 
Borrom Rent op pixel 500 horizontaal en 150 verticaal). Verder kan je 
hier ook nog de afstand tussen de lettertekens (Kernine) en tussen de 
tekstregels (Laine) instellen. 
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Meer scènes en objecten 


Simpel effect 


Een statisch stukje tekst is natuurlijk niet waar we naar op zoek zijn. 
Daar brengen we dus snel verandering in: selecteer je tekstobject in de 
scênelijst en open het tabblad TimeLine. Daar prijkt al een uitnodigende 
knop App Errecr, tenminste als je ook in dit TimeLine-venster je tekstobject 
geselecteerd hebt. Druk je deze knop in, dan verschijnt er een menu met 
in totaal zo’n 17 verschillende effecten. Je merkt dat die in twee delen 
opgesplitst zijn: het bovenste deel verzamelt effecten die voor elk on- 
derdeel (hier: alle lettertekens) van het object op dezelfde manier gelden, 
in het onderste deel vind je effecten terug die op de verschillende on- 
derdelen anders kunnen inwerken. We openen de trukendoos van SWiSH 
met een bescheiden exemplaar: het Fape In-effect. Zodra je dit effect 
geselecteerd hebt, verschijnt het naast je tekstobject in een balkje op 
de tijdlijn. Standaard neemt dat effect 9 frames in beslag. Bij 12 fps duurt 
het effect dus 3/4 seconde. Je kan het echter ook langer of korter ma- 
ken: daarvoor hoef je alleen maar de zijkant van het balkje naar binnen 
of naar buiten te verslepen. Hoe langer het balkje, hoe meer frames en 
dus hoe langer het effect. Het is trouwens ook mogelijk het balkje in z’n 
geheel over de tijdlijn te verplaatsen. Standaard neemt een scène 200 
frames in beslag, maar dat aantal kan je op elk moment zelf aanpassen 
bij NumBer or Frames. Om het effect in actie te zien, zorg je eerst dat het 
weergavevenster zichtbaar is en druk je vervolgens in de gereedschaps- 
balk op het knopje Pray Scene (of Pray Movre). Als je de voorvertoning wil 
beëindigen, moet je het knopje Stop Movre aanklikken! Benieuwd hoe je 
animatie er in een browser uitziet? Open dan snel het menu Fie en se- 
lecteer Test in Browser. 
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Meer effecten, meer objecten. 


Stel nu dat je twee verschillende tekstobjecten in een zelfde scène wil, 
én dat je die objecten elk een ander effect wil meegeven — het liefst 
ook nog op een verschillend tijdstip. Dan ga je als volgt te werk. Open 
opnieuw het tabblad Timerine en druk nogmaals op het knopje Insert 
Text. Het nieuwe tekstobject verschijnt nu op de tijdlijn boven je be- 
staande tekstobject. Selecteer het nieuwe tekstobject en open vervol- 
gens het tabblad Text. Hier pas je het nieuwe object naar wens aan. 
Keer daarna terug naar de Timeuine. Kies achtereenvolgens voor de twee 
objecten een passend effect, zoals we hiernaast beschreven hebben. 
Afhankelijk van het effect kan er wel nog een extra dialoogvenster 
verschijnen waarin je een aantal parameters moet ingeven. We kunnen 
echter onmogelijk alle parameters voor elk effect bespreken: zelf ex- 
perimenteren is hier de boodschap! Je kan een toegepast effect trou- 
wens op elk moment nog verder aanpassen: een dubbelklik op het 
balkje van het effect volstaat. 

Het spreekt voor zich dat je ook twee of meer effecten op een zelfde 
object kan toepassen: telkens je via de knop App Errecr een effect 
toevoegt, verschijnt voor dat object een bijkomend balkje op de tijdlijn. 
Dat kan je dan naar hartelust verschuiven. Wil je een effect weer kwijt? 
Selecteer het en kieper het met de knop Detere Errect de prullenmand 
in. Ook een object kan je makkelijk weer doen verdwijnen: even selec- 
teren en bevestigen met de Derere-toets volstaat. Verstrooid geweest? 
Geen nood: vanuit het Eprr-menu brengt de Unpo-optie weer opluch- 
ting. 


General | Content Timeline | Image | Actions | Export | 


Wat als je de inhoud van je animatie op een bepaald 
moment geheel door andere inhoud wil vervangen? 
Dan maak je toch gewoon een extra scêne aan! 
SWiSH zal deze scène automatisch afspelen nadat 
de vorige afgelopen is. Hier gebruik je dus de knop 
Insert Scene in de gereedschapsbalk. 

Maar er valt nog genoeg te beleven in SWiSH Lite. 
Zo kan je bijvoorbeeld ook afbeeldingen in je scène 
plakken. Moeilijk is dat niet, want ook hier heb je 
een handig knopje op de toolbar: Insert Imace. Je 
hebt de keuze uit gif, jpg en png. Net als bij de 
tekstobjecten staan hier een aantal effecten in het 
schap. Met de combinatie Hive en Show is het bij- 
voorbeeld perfect mogelijk zo’n afbeelding op een 
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En hoeveel scènes had je zoal gewild? 


bepaald tijdstip (frame) weg te toveren en even 
later weer zichtbaar te maken. Zitten andere ob- 
jecten op de scêne in de weg om een minutieuze 
positionering mogelijk te maken, dan kan je die 
objecten tijdelijk onzichtbaar maken door het oog- 
icoontje naast dat object in de scènelijst aan te 
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klikken. Als je ze weer zichtbaar wil maken, klik je 
nog een keer op dat icoontje. En als je de volgorde 
van je scènes op een bepaald moment liever anders 
gezien had, selecteer dan de bewuste scène in de 
scênelijst en druk vervolgens op de knopjes Move 
Ogdect Up / Down. 


En... actie! 


Beweging hebben we al, maar van inter- 
activiteit met onze bezoekers is nog geen 
sprake. Het tabblad Acrrons moet daar 
verandering in brengen! Stel dat je de 
bezoeker een scène met een startmenu 
wil aanbieden, waarbij hij telkens naar 
een andere scène wordt geleid afhanke- 
lijk van welke figuur hij in dat menu 
aanklikt. Dat los je als volgt op. Selecteer 
een van de figuren uit de scène met het 
startmenu, en open vervolgens het tab- 
blad Acrrons. Druk op de knop App Evenr. 
Kies hier On (Rerease), waarna je op de 
knop App Action drukt. Selecteer Go To 
Frame. Rechts kies je nu de gewenste 
scêne, waar de bezoeker heen wordt ge- 
leid zodra hij op die figuur de ingedrukte 
muisknop weer loslaat. Voorwaarde is dus 
wel dat die scènes al in je scènelijst wa- 
ren opgenomen. Bij Frame, NumBer vul je 
normaal o in, tenzij je de bezoeker er- 
gens midden in die scène wil neerploffen. 
Laat het vinkje bij Go ro anp Pray staan; 
zoniet stokt de animatie. 
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Laat je bezoeker zelf ook meespelen… 


Nog meer actie 


Het probleem is echter dat SWiSH Lite wel het 
startmenu toont, maar al meteen overgaat naar 
de eerstvolgende scène, zonder dat de bezoeker 
de kans krijgt om zijn keuze te maken. We moe- 
ten dus een mechanisme voorzien waarbij we de 
animatie bij de eerste scène (het startmenu 
dus) kunnen stopzetten, in afwachting van de 
keuze van de bezoeker. Selecteer daarvoor de 
scène met het startmenu en open het tabblad 
TimeLine. Klik een frame aan op het einde van die 
scêne, of alleszins wanneer alle eventuele ani- 
maties van die scène achter de rug zijn. Druk 
dan op de knop App Action, en kies hier Srop. 
Bevestig je keuze met OK. Je merkt nu dat dit 
frame een blauw a-balkje meegekregen heeft: 
dat betekent dat aan dit frame een actie gekop- 
peld werd. 

Een typische combinatie van acties vind je in 
een zogenaamde preloader: een welkomstscène 
die de bezoeker te zien krijgt, tot wanneer de 
echte hoofdanimatie geheel ingeladen is. Je 
vindt trouwens zo'n exemplaar in het menu 
SamPLes, onder de naam PreLoaper.swi. Haal die 
gerust even binnen (maar bewaar je eigen cre- 


Publicatie 


Is je meesterwerk klaar, dan is het de hoogste tijd om de 
animatie in een Flash-formaat te gieten en ze in een web- 
pagina op te nemen. Ga naar het menu Fue en kies PusLrsn. 
Kies een geschikte locatie en geef de webpagina een pas- 
sende naam (standaard is dat de naam van de animatie, 
met de extensie html). Zodra je met Opstaan bevestigt, 
zorgt SWiSH zowel voor het swf-bestand als voor de no- 
dige html-code. Eventueel kan je deze code uit de html- 
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Ook aan frames kan je een bepaalde actie kleven 


atie wel eerst!). Selecteer de scène PrELOADER, 
open de TimeLine, en dubbelklik op het A-FRAME 
van frame 0. Het bijhorende actievenster ver- 
schijnt, en je merkt dat er twee acties in het 
gareel staan. Die zorgen er samen voor dat het 
filmpje dadelijk overspringt naar frame o van 
de scêne met de hoofdanimatie, maar énkel als 
die volledig is binnengehaald op de computer 
van de bezoeker. Op frame 20 van de Preloader- 
scène tref je dan ook nog een actie aan die 
ervoor zorgt dat de Preloader-scène in afwach- 
ting daarvan telkens opnieuw afgespeeld 
wordt. 


Publish SWiSH Movie 


“| Bet 


Opslaan in: [ 1 menufilm 


T]menukeuze.html 


Bestandsnaam: |Menukeuze.html 


Opslaan als 


online. 


pagina knippen en in je eigen webpagina plakken. Overigens 

kan je in het menu Fire ook nog altijd kiezen voor Export To SWF: SWiSH creëert dan alleen maar 
een swf-bestand; de bijhorende html-code moet je dan maar op een andere manier zien uit te 
dokteren. Nu hoef je enkel nog de webpagina en het swf-bestand naar je webruimte te uploa- 
den, en je bezoekers kunnen genieten van een blitse animatie! « 


Opslaan 


TM Chin) INN 


Voor je het weet, staat je Flash-animatie ook 
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